<template>
	<div class="info">
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item :to="{ name: 'managerCar' }">车辆管理</el-breadcrumb-item>
			  <el-breadcrumb-item>车辆信息查看</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div id="carInfo">
			<div class="carInfo-title">
				<p>车辆信息</p>
			</div>
			<div class="u-info">
				<table>
					<tr>
						<td class="td-name">车牌号：</td>
						<td class="td-value">{{car.license_num}}</td>

					</tr>
					<tr>
						<td class="td-name">车辆类型：</td>
						<td class="td-value">{{car.type}}</td>
						<td v-if="car.type == '公交'">
							<el-button @click="RouteSetting(car.id)" type="info" size="small">路线设置</el-button>
						</td>
					</tr>
					<tr>
						<td class="td-name">车辆品牌：</td>
						<td class="td-value">{{car.brand}}</td>
					</tr>
					<tr>
						<td class="td-name">车辆状态：</td>
						<td class="td-value" ref="state">{{car.state |  state}}</td>
					</tr>

					<tr>
						<td class="td-name">现在位置：</td>
						<td class="td-value">
							<span v-if="!flag">({{car.cur_loc_lon}},{{car.cur_loc_lat}})</span>
							<span v-if="flag">{{loc}}</span>
						</td>
						<td>
							<el-button @click="flag = !flag" type="info" size="small">解析</el-button>
							
							<el-button @click="showMap = !showMap" type="info" size="small" v-if="car.cur_loc_lon != null &&car.cur_loc_lat != null">查看位置</el-button>

						</td>
					</tr>
					<tr v-if="car.state == 1">
						<td class="td-name">驾驶者：</td>
						<td class="td-value">
							<a href="" @click.prevent = "toUser" style="color: blue;">{{user.username}}</a>
						
						</td>
					</tr>
					<tr v-if="car.type == '公交'">
						<td class="td-name">公交路线：</td>
						<td class="td-value">
							<ul class="BusRoutes">
								<li v-for="(item,index) in way" :key="index" class="addressName">
									{{item.name}}
								</li>
							</ul>
							
						</td>
					</tr>

				</table>
			</div>
			<div id="carPic">
				<img v-bind:src="pic" class="img-pic" width="100" height="100" />
				<div class="file-upload">
					<button class="file-btn">修改图片</button>
					<input type="file" class="file-pic" name="aaa" accept="image/png,image/jpg,image/jpeg" @change="upload($event)"
					 ref="upload-pic" />
				</div>

			</div>
			<keep-alive include="mapComponent">
				<div class="showMap">
					<mapComponent :gongneng='gongneng' :loc='ptList' :way='way' :address='loc' :info='car'  v-if="showMap "></mapComponent>
				</div>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	import BMap from 'BMap'
	import mapComponent from './mapComponent.vue'
	export default {
		data() {
			return {
				car: '',
				pic: require('@/assets/car.png'),
				id: '',
				flag: false,
				loc: '',
				oldpic:'',
				user:'',
				gongneng:2,
				showMap:false,
				ptList:'' ,
				way:[],
			}
		},
		components:{
			mapComponent
		},
		filters:{
			state:(val)=>{
				if(val == 0){
					return "未行驶"
				}
				if(val == 1){
					return "正在行驶"
				}
			}
		},
		created() {
			this.id = this.$route.query.car_id;
			this.getCarInfo();
		},
		methods: {
			//公交路线设置
			RouteSetting(id){
				this.$router.push({
					name:'routeSetting',
					query:{
						car_id:id
					}
				})
			},
			//获取车辆信息
			getCarInfo() {
				this.$axios.get('/api/info/carInfo', {
						params: {
							id: this.id
						}
					})
					.then(data => {
						if (data.status == 200) {
							this.car = data.data[0];
							this.getLocation(this.car)
							this.getCarPic();
							if(this.car.state == 1){
								this.getUserId(this.car.id);
							}
							if(this.car.type == '公交'){
								this.getBusRoutes();
							}
							
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			//获取驾驶者的username
			getUserId(id){
				this.$axios.get('/api/car/getUserName',{params:{id:id}})
				.then(data=>{
					if(data.data.length != 0){
						this.user = data.data[0];
					}
				})
				.catch(err=>{
					console.log(err)
				})
			},
			// 上传图片
			upload(event) {  
				let regx = /image/;
				let file = event.target.files[0];
				if (regx.test(file.type)) {
					
					let data = new FormData()
					data.append('file', file);
					data.append('id', this.id)
					this.$axios.post('/api/upload/uploadCarPic', data, {
							headers: {
								'Content-Type': 'multipart/form-data'
							},
						})
						.then(data => {
							if (data.status == 200) {
								this.getCarInfo();
								this.getCarPic();
 								this.deletePic();
							}
						})
				}

			},
			//上传成功后删除原先服务器的图片
			deletePic(){
				if(this.oldPic != ''){
					this.$axios.get('/api/upload/deleteCarPic', {
						params:{
							oldPic:this.oldPic
						}
					}).catch(err=>{
						console.log(err)
					})
				}
				
			},
			// 获取车辆图片
			getCarPic() {
					this.$axios.post('/api/upload/getCarPic', {
				
								car_id: this.id
							},
							{responseType: 'blob'
						})
						.then(data => {
							if (data.status == 200) {		
								if (data.data.size != 0) {
									let reader = new FileReader()
									reader.onload = e => {
										this.pic = e.target.result
									}
									reader.readAsDataURL(data.data);
								}
							}
						})
						.catch(err=>{
							console.log(err)
						})
				
				
					this.$axios.get('/api/upload/getCarPicDir', {
							params: {
								car_id: this.id
							},
							
						})
						.then(data => {
							if (data.status == 200) {		
								if (data.data.size != 0) {
									this.oldPic = data.data;
									
								}
							}
						})

			},
			
			getBusRoutes() {
				this.$axios.get('/api/car/getBusRoutes', {
						params: {
							car_id: this.id
						}
					})
					.then(data => {
						if (data.data == 'no') {
							this.gongneng = 2;
						} else {
							
							let departure = JSON.parse(data.data[0].departure)
							let destination = JSON.parse(data.data[0].destination)
							let way = JSON.parse(data.data[0].way)
				
							this.way=this.way.concat(departure);
							this.way=this.way.concat(way);
							this.way=this.way.concat(destination);
							this.gongneng = 4;
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			toUser(){
				this.$router.push({
					path: '/main/manager/userInfo',
					query: {
						user_id: this.user.user_id
					}
				})
			},
			//逆地址解析 ( 第一步将数据 point化  第二步将point逆地址解析)
			getLocation(car) {
				this.ptList = new BMap.Point(car.cur_loc_lon, car.cur_loc_lat)
					
				let geoc = new BMap.Geocoder();

				geoc.getLocation(this.ptList, (result) => {
					let addComp = result.addressComponents;
					this.loc = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
						addComp.streetNumber;
				})

			},

		}
	}
</script>

<style lang="less" scoped>
	.info {
		width: 100%;
		height: 100%;
		.breadcrumb{
			height: 28px;
			span{
				line-height: 28px;

			}
		}

		.title() {
			border-bottom: 1px solid #E0ECFF;
			width: 100%;
			height: 30px;
			font-size: 18px;
			text-align: left;
			color: black;
			background: -webkit-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: -moz-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: -o-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: linear-gradient(to bottom, #EFF5FF 0, #E0ECFF 100%);
		}

		.td-table(@w, @ta) {
			width: @w;
			height: 45px;
			line-height: 45px;
			text-align: @ta;
		}

		.td-name {
			.td-table(120px, right)
		}

		.td-value {
			.td-table(240px, left)
		}

		#carInfo {
			width: 80%;
			margin-top: 28px;
			margin-left: 88px;
			background-color: #fff;
			border: 1px solid #E0ECFF;
			position: relative;

			.carInfo-title {
				.title();

				p {
					width: 300px;
					line-height: 26px;
					padding-left: 2px;
				}
			}

			.u-info {
				color: #000;
				font-size: 16px;
				height: 300px;

			}

			#carPic {
				border: 1px solid #E0ECFF;
				width: 140px;
				height: 140px;
				position: absolute;
				top: 40px;
				right: 30px;

				.img-pic {
					
				}

				.file-upload {
					position: relative;
					margin-top: 10px;

					.file-pic {
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}

					.file-btn {
						width: 70px;
						font-size: 12px;
					}

				}
			}

			.input-info {
				border: 1px solid #000;
				width: 200px;
			}
			.BusRoutes{
				display: flex;
				.addressName{
					width: 20px;
					margin: 0 10px;
					line-height: 18px;
					color: blue;
					&::before{
						content: '';
						display: inline-block;
						width: 10px;
						height: 10px;
						justify-content: center;
						align-items: center;
						background-color: #777;
						border-radius:50%; 
					}
				}
			}
			
		}
		.showMap {
			width: 650px;
			height: 270px;
			margin-top: 10px;
			overflow: hidden;
		}

	}
</style>
